<template>
	<u-popup :show="commentShow" mode="center" round="20rpx" :safeAreaInsetBottom="false" @close="commentClose">
		<view style="padding: 60rpx 40rpx;gap: 40rpx;display: grid;width: 80vw;">
			<view class="flex justify-center">
				<text class="font-bold text-black text-lg">{{$t('filed.fabiaopinglun')}}</text>
			</view>
			<u-textarea v-model="content" :placeholder="$t('public.placeholderContent')" :customStyle="inputStyle" count
				maxlength="200"></u-textarea>
			<view class="grid grid-col-2 gap">
				<view class="setButton" @tap.stop="commentClose"
					style="height: 80rpx;border: 1px solid #D2D2D2;border-radius: 40rpx;">
					<text class="font-400 text-gray text-xl">{{$t('filed.quxiao')}}</text>
				</view>
				<view class="setButton" @tap.stop="submit"
					style="height: 80rpx;background: #06C168;border-radius: 40rpx;">
					<text class="font-400 text-xl text-white">{{$t('filed.queding')}}</text>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		data() {
			return {
				content: '',
				commentShow: false,
				inputStyle: {
					background: '#FFFFFF',
					borderRadius: '20rpx',
				},
			}
		},
		methods: {
			opencomment() {
				this.commentShow = true
			},
			commentClose() {
				this.content = ''
				this.commentShow = false
			},
			submit() {
				if (this.content) {
					this.$emit('submitComment', this.content)
					this.commentShow = false
				} else {
					this.helper.showToast('请输入评论')
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
</style>